import React from "react";
import {ExclamationCircleOutlined} from "@ant-design/icons";
import {LdhFormItem, LdhFormItemTip, LdhInput} from "@biz/Components";

import BaseModal from "@biz/BaseModal";

const prefix = "update-mqtt-modal";
export default class UpdateMqttModal extends BaseModal {

    constructor(props) {
        super(props);
        this.visibleStatus = "updateMqtt";
        this.title = "MQTT配置";
        this.className = prefix;
    }

    onGetDetailCompleted(detail) {
        this.title=`MQTT配置  (${detail.uid} / ${detail.name})`;
    }

    onSubmit(values){
        let {action, store:{detail}} = this.props;
        let {subAddress, pubAddress} = values;
        let vo = {
            id: detail.id,
            subAddress,
            pubAddress
        }
        action.updateMqtt(vo);

    }

    renderDetail() {

        return <div>
            <LdhFormItemTip className="form-tip">
                <ExclamationCircleOutlined />修改后，可能需要等待几秒钟，操作才能生效
            </LdhFormItemTip>
            <LdhFormItem label="订阅主题" name="pubAddress" required>
                <LdhInput maxLength={60} showCount/>
            </LdhFormItem>
            <LdhFormItemTip>对应APP上的订阅主题，即设备获取消息的地址， 服务端发送消息的地址， 需要确保唯一</LdhFormItemTip>

            <LdhFormItem label="发布主题" name="subAddress" required>
                <LdhInput maxLength={60} showCount/>
            </LdhFormItem>
            <LdhFormItemTip>对应APP上的发布主题，即设备发送消息的地址， 服务端监听消息的地址， 需要确保唯一</LdhFormItemTip>
        </div>
    }

}